<template>
  <div class="box">
    <FirstComp :cityData="cityData"  :currentWeatherData="currentWeatherData" />
    <RouterView v-if="isCityInfoRoute"></RouterView>
    <main class="main container" v-else>
        <SecondComp/>
        <ThirdComp :allWeatherData="allWeatherData" :showTitle="true"/>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue'
import { useRoute } from 'vue-router'
import FirstComp from './PageComp/FirstComp.vue'
import SecondComp from './PageComp/SecondComp.vue'
import ThirdComp from './PageComp/ThirdComp.vue'
import { getIpData, getCityData, getWeatherData } from '@/api'
//城市名称
const cityData = ref({})
//城市的adcode
const adcodeData = ref('')
//实时天气
const currentWeatherData = ref({
  lives: [],
})
//近期天气
const allWeatherData = ref({
  forecasts: [],
})
const route = useRoute()
const isCityInfoRoute = ref(route.path.includes('/weather/'))
watch(
  () => route.path,
  (newPath) => {
    isCityInfoRoute.value = newPath.includes('/weather/')
  }
)
onMounted(async () => {
  //获取城市数据
  cityData.value = await getIpData()
  //获取城市对应adcode
  adcodeData.value = await getCityData(cityData.value.city)
  //获取实时天气数据
  currentWeatherData.value = await getWeatherData(
    adcodeData.value.geocodes[0].adcode,
    'base'
  )
  //获取近期天气数据
  allWeatherData.value = await getWeatherData(
    adcodeData.value.geocodes[0].adcode,
    'all'
  )
})
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: rgba(0, 102, 138, 1);
  .main {
    width: 100%;
    color: rgba(255, 255, 255, 1);
    margin-right: auto;
    margin-left: auto;
    padding-right: 10rem;
    padding-left: 10rem;
  }
}

</style>
